<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myborder {
            border: 1px blueviolet solid;
        }
        .myborder1{
            border: 1px burlywood solid;
        }
        .myfont{
            font-size: 60px;
        }
        .imagesize{
            height: 300px;
            width: 300px;
        }
    </style>
</head>

<body>
        <!-- class同时运用两个样式中间加个空格 -->
    <div id="div1" style="color: red;" class="myborder myfont" title="div1">
        这是div1
    </div>
    <!-- br是换行的作用 -->
    <img src="./images/桃桃.png" width="100px" height="200px"><br/>
    <!-- input是生成输入框 -->
    <input id="username"></input>
   <script>
        // js操作属性一
        let div1 = document.getElementById("div1")
        div1.title = "XXXXX"
        div1.style.color = "pink"
        div1.style.backgroundColor = "brown"
        console.log(div1.title)
        //js操作属性二
        //将title的xxxxx替换为YYYY
        div1.setAttribute("title", "YYYY")
        let title = div1.getAttribute("title")

        let img = document.getElementsByTagName("img")[0]
        //setAttribute的效果是将原来的桃桃替代为dog
        img.setAttribute("src","./images/dog.png") 

        //js操作样式一
        div1.style.color="blue"
        img.style.border = "10px red solid"
        img.style.borderRadius="60px"
        // js操作样式二
        //将id为div1的div元素的class属性值修改为myborder1
        // 1. div1.className = "myborder1 myfont"
                //更加灵活地调用类
        // 2.div1.classList.add("myborder1")
        // 2.div1.classList.add("myfont")
        console.log(div1.classList)
        div1.classList.remove("myfont")
        //toggle("xxx")有xxx元素就删除没有就添加
        div1.classList.toggle("myfont")
        // 用于判断是否存在某个样式
        let flag = img.classList.contains("myborder1")
        console.log(flag)

        //事件
        //1.鼠标事件
        //(1)点击事件
        img.onclick=()=>{
            img.classList.toggle("imagesize")
            console.log("哇咔咔")
        }
        
        //(2)移入，移出，移动
        img.addEventListener("mouseenter",function(){
            console.log("鼠标移入该区域")
        })
        img.addEventListener("mouseleave",function(){
            console.log("鼠标移入该区域")
        })
        img.addEventListener("mousemove",function(){
            console.log("鼠标在该区域移动")
        })

        //键盘事件
        let username = document.getElementById("username") 
        username.addEventListener("keyup",function(event){
            console.log("键盘某个按键按下并抬起了",event.key,event.code)
        })     
        username.addEventListener("keydown",function(){
            console.log("键盘某个按键按下")
        })    
             </script> 
        </body>
 </html>